$inactive-nav-color: #999999;
$book-nav-width: 210px;

@media screen and (max-width: 900px) {
    #show-book-nav:not(:checked) + .book-nav {
        transform: translateX(calc(0px - #{$book-nav-width}));
    }

    #show-book-nav:checked + .book-nav + .book-content {
        transform: translateX($book-nav-width);
    }

    .book-nav {
        margin-right: calc(0px - #{$book-nav-width});
    }
}

.book-nav {
    margin-top: $content-padding;
    flex: 0 0 $book-nav-width;
    user-select: none;
    transition: transform 0.3s;
}

.book-nav-sections {
    margin: 0;
    padding: 0;
}

.book-nav-sections-container {
    display: block;
    padding-left: 10px;
    padding-top: 40px;
}

.book-nav-section {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.book-nav-sections-indented {
    margin-left: 15px;
}

.book-nav-section-title {
    position: relative;
    z-index: 1;
    font-size: 1.22rem;
    color: $inactive-nav-color;
    font-style: normal;
    text-decoration: none;
}

.book-nav-section-title:hover,
.book-nav-section-title:active {
    color: $hover-color;
    text-shadow: 0 0 0.9px $hover-shadow-color, 0 0 0.9px $hover-shadow-color;
}

.book-nav-section-title-active {
    font-size: 1.22rem;
    color: $default-color;
    font-style: normal;
    text-decoration: none;
    text-shadow: 0 0 0.5px $default-color, 0 0 0.5px $default-color;
}

.book-nav-section-number {
    font-family: 'Fira Code', monospace;
    font-variant-ligatures: none;
    font-size: 1rem;
    margin-right: -0.2rem;
}

.book-content {
    transition: transform 0.3s;
}
